<template>
	<view class="container">
		<view v-if="list.length===0">
			<luanqing-empty :show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty>
		</view>
		<scroll-view scroll-y="true" v-if="list.length>0">
			<view class="item" v-for="(item,index) in list" :key='index'>
				<view class="headContainer xy_center_between">
					<view class="teacherContainer xy_center">
						<view class="avatar">
							<image :src="item.teacher.avatar" mode=""></image>
						</view>
						<view class="nickname">
							{{item.teacher.nickname}}
						</view>
					</view>
					<view class="time">
						{{item.createtime}}
					</view>
				</view>
				<view class="content">
					<rich-text :nodes="item.content"></rich-text>
				</view>
				<view class="rate">
					<view class="rate_item y_center">
						<text>行为表现：</text>
						<uni-rate :max="5" :value="item.behavior_star" color="#E2E2E2" active-color="#EBA340"
							:readonly="true" :size="15" />
					</view>
					<view class="rate_item y_center">
						<text>作业表现：</text>
						<uni-rate :max="5" :value="item.homework_star" color="#E2E2E2" active-color="#EBA340"
							:readonly="true" :size="15" />
					</view>
				</view>
				<view class="picContainer y_center">
					<view class="pic" v-for="(v,k) in item.images" :key='k'>
						<image :src="v" mode="" @click="preview(item.images,k)"></image>
					</view>
				</view>
				<view class="operate y_center">
					<view class="huifu xy_center" @click="huifu(item,index)">
						<image src="../../../static/img/pinglun@2x.png" mode=""></image>
						<text>回复</text>
					</view>
					<view class="zan xy_center" @click="zan(item,index)">
						<image :src="item.is_like===1?zanActive:zanIcon" mode=""></image>
						<text>点赞</text>
					</view>
				</view>
				<view class="reply_info" v-if="item.reply_info">
					<view class="xy_center_between">
						<view class="userInfo xy_center">
							<view class="avatar">
								<image :src="item.user.avatar" mode=""></image>
							</view>
							<view class="nickname">
								{{item.user.nickname}}
							</view>
						</view>
						<view class="time">
							{{item.reply_time}}
						</view>
					</view>
					<view class="reply_info_content">
						{{item.reply_info}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="huifuContainer xy_center_between" v-show="show">
			<view class="inputContainer">
				<input v-model="reply_info" confirm-type='send' @blur='blurHadle' :focus='focusFlag'
					@keydown.enter="send" placeholder="回复" />
			</view>
			<view class="btn" @click="send">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				list: [],
				isLoadMore: false,
				page: 1,
				zanIcon: require('../../../static/img/fw@2x.png'),
				zanActive: require('../../../static/img/fwbf@2x.png'),
				reply_info: '', //回复内容
				show: false, //回复弹窗
				feedback_id: '', //回复id
				index: '',
				focusFlag: false,
				userInfo: {},
			}
		},
		created() {
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.userInfo.avatar = res.data.avatar;
					this.userInfo.nickname = res.data.nickname;
					this.getlist()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getlist()
			}
		},
		methods: {
			preview(arr, index) {
				console.log(index)
				uni.previewImage({
					current: index,
					urls: arr,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			blurHadle() {
				this.show = false;
				this.focusFlag = false;
			},
			send() {
				this.$request('/api/wxapp/v2/mine/feedback/reply', {
					"token": this.token,
					"feedback_id": this.feedback_id,
					"reply_info": this.reply_info,
				}).then(res => {
					this.focusFlag = false;
					if (res.code === 1) {
						this.list[this.index].reply_info = this.reply_info;
						this.list[this.index].user = this.userInfo;
						this.list[this.index].reply_time = this.getCurrentDate();
						uni.showToast({
							title: '回复成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '回复失败',
							icon: 'none'
						})
					}

				})
			},
			huifu(obj, index) {
				if (obj.reply_info !== '') {
					uni.showToast({
						title: '已有回复内容！',
						icon: 'none'
					})
				} else {
					this.show = true;
					this.feedback_id = obj.id;
					this.index = index;
					this.focusFlag = true;
				}
			},
			zan(obj, index) {
				let is_like;
				if (obj.is_like === 1) {
					is_like = 0;
				} else {
					is_like = 1;
				}
				this.$request('/api/wxapp/v2/mine/feedback/like', {
					"token": this.token,
					"feedback_id": obj.id,
					"is_like": is_like,
				}).then(res => {
					this.list[index].is_like = is_like;
					let msg;
					if (is_like === 0) {
						msg = '取消点赞成功！';
					} else {
						msg = '点赞成功！';
					}
					if (res.code === 1) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}

				})
			},
			getlist() {
				this.$request('/api/wxapp/v2/mine/feedback/list', {
					"token": this.token,
					"page": this.page,
					"pageSize": 20,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						if (res.data) {
							this.list = this.list.concat(res.data)
							if (res.data.length < this.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					}
				})
			},
			getCurrentDate() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				var day = now.getDay(); //得到周几
				var hour = now.getHours(); //得到小时
				var minu = now.getMinutes(); //得到分钟
				var sec = now.getSeconds(); //得到秒
				month = month + 1;
				if (month < 10) month = "0" + month;
				if (date < 10) date = "0" + date;
				if (hour < 10) hour = "0" + hour;
				if (minu < 10) minu = "0" + minu;
				if (sec < 10) sec = "0" + sec;
				var time = "";
				time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
				return time;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container,
	scroll-view {
		background: #F6F6F6;
	}

	.item {
		margin-bottom: 10px;
		padding: 20rpx 0 40rpx 40rpx;
		background-color: #FFFFFF;
	}

	.headContainer {
		width: 680rpx;
	}

	.teacherContainer {
		.avatar {
			width: 36px;
			height: 36px;

			image {
				width: 36px;
				height: 36px;
				border-radius: 50%;
			}
		}

		.nickname {
			font-size: 20px;
			font-weight: 700;
			color: #666666;
			margin-left: 10px;
		}
	}

	.time {
		font-size: 15px;
		color: #999999;
	}

	.content {
		width: 680rpx;
		margin-top: 20rpx;
	}

	.rate {
		margin-top: 20rpx;
	}

	.rate_item {
		font-size: 15px;
		font-weight: 700;
		color: #666666;
		margin-top: 20rpx;
	}

	.picContainer {
		margin-top: 40rpx;
		flex-wrap: wrap;

		.pic image {
			width: 210rpx;
			height: 210rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.operate {
		font-size: 12px;
		color: #666666;
		justify-content: flex-end;
		margin-right: 20px;

		.huifu {
			margin-right: 11px;
		}

		image {
			width: 12px;
			height: 12px;
			margin-right: 11px;
		}
	}

	.huifuContainer {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		background-color: #FFFFFF;

		.inputContainer {
			width: 610rpx;

			input {
				width: 100%;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 2px;
				border: 1px solid #E0E0E0;
			}
		}
	}

	.btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #38C386;
		border-radius: 2px;
		font-size: 15px;
		color: #FFFFFF;
		text-align: center;
	}

	.userInfo {
		.avatar {
			width: 24px;
			height: 24px;

			image {
				width: 24px;
				height: 24px;
				border-radius: 50%;
			}
		}

		.nickname {
			font-size: 15px;
			color: #666666;
			margin-left: 10px;
		}
	}

	.reply_info {
		width: 670rpx;
		border-top: 1px solid #E5E5E5;
		margin-top: 20px;
		padding-top: 24px;
	}

	.reply_info_content {
		margin-top: 10px;
		font-size: 15px;
		color: #333333;
		line-height: 23px;
	}
</style>
